﻿<template>
  <div class="allper" v-if="returnData">
    <div class="header">
      <div class="top">
        <img :src="imgurl1" alt @click="$back()" />
        <div style="color:#000;">个人中心</div>
        <div style="color:#000;" @click="logOut()">退出</div>
      </div>
      <div class="center" @click="$jump('/personageInfor')">
        <img
          :src="returnData.pic_id ? $photo + returnData.pic_id : imgurl2"
          alt
          srcset
        />
        <div style="color:#000;font-weight:600;">{{ returnData.name }}</div>
      </div>
      <div class="bottom">
        <div>
          <div>{{ returnData.vip }}</div>
          <img :src="imgurl7" alt srcset />
        </div>
        <div @click="tankuang('lixf')">立即续费</div>
      </div>
    </div>
    <div class="container">
      <div class="myqy">
        <div>我的权益</div>
        <div>
          <div @click="tankuang('ye')">
            <div>余额</div>
            <img :src="imgurl3" alt />
            <div>{{ returnData.balance }}元</div>
            <div>去充值</div>
          </div>
          <div @click="tankuang('yegm')">
            <div>次数</div>
            <img :src="imgurl4" alt />
            <div>{{ returnData.frequency }}次</div>
            <div>去购买</div>
          </div>
        </div>
      </div>
      <div class="myorder">
        <div>我的订单</div>
        <div>
          <div @click="$jump('/task')">
            <img :src="imgurl5" alt />
            <div>我的任务</div>
          </div>
          <div @click="$jump('/request')">
            <img :src="imgurl6" alt />
            <div>我的请求</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 次数 -->
    <div class="yetc" v-if="yetcD" @click="yetcD = !yetcD">
      <div class="cont" @click.stop>
        <div>余额</div>
        <div>
          <img :src="imgurl8" alt srcset />
          {{ task_money1 }}元
        </div>
        <div>本次下单你需要支付{{ task_money1 }}元的余额。</div>
        <div @click="paymentTime()">确认</div>
      </div>
    </div>
    <!-- ==== -->
    <!-- vip-->
    <div class="yetc" v-if="yetcDTwo" @click="yetcDTwo = !yetcDTwo">
      <div class="cont" @click.stop>
        <div>余额</div>
        <div>
          <img :src="imgurl8" alt srcset />
          {{ task_moneys }}元
        </div>
        <div>本次下单你需要支付{{ task_moneys }}元的余额。</div>
        <div @click="paymentVip()">确认</div>
      </div>
    </div>
    <!-- 次数购买 -->
    <div class="csbuy" v-if="csBuy" @click="tankuang('yegm')">
      <div class="cont" @click.stop>
        <div>购买次数</div>
        <div>
          <div>
            次数
            <img :src="imgurl42" alt />
          </div>
          <div>{{ returnData.invite_money }}元/次</div>
        </div>
        <div>
          <div>
            购买数量
            <img :src="imgurl72" alt />
          </div>
          <div>
            <img :src="imgurl10" alt @click="jian()" />
            {{ num }}次
            <img :src="imgurl9" alt @click="jia()" />
          </div>
        </div>
        <div class="yegff" @click="tankuang('goumai')">余额购买</div>
      </div>
    </div>
    <!-- 会员充值 -->
    <div class="csbuy" v-if="hycz" @click="tankuang('lixf')">
      <div class="cont" @click.stop>
        <div>会员充值</div>
        <div
          class="cishu"
          v-for="(vip, index) in vipData"
          :key="index"
          @click="topUp(index)"
        >
          <div>
            {{ vip.name }}
            <img :src="imgurl72" alt />
          </div>
          <div>{{ vip.money }}元/年</div>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <bottomNavigation :nm="nm"></bottomNavigation>
  </div>
</template>

<script>
// import bottomNavigation from '../../components/bottomNavigation.vue'
const bottomNavigation = () => import('../../components/bottomNavigation.vue')

var timer
export default {
  components: {
    bottomNavigation
  },
  data() {
    return {
      states: 0,
      returnData: null,
      nm: 1,
      showPop: false,
      imgurl1: require('../../../static/images/fz/Back.png'),
      imgurl2: require('../../../static/images/fz/userH.png'),
      imgurl3: require('../../../static/images/fz/qian1.png'),
      imgurl4: require('../../../static/images/fz/cishu.png'),
      imgurl42: require('../../../static/images/fz/cishu2.png'),
      imgurl5: require('../../../static/images/fz/renwu.png'),
      imgurl6: require('../../../static/images/fz/qingqiu.png'),
      imgurl7: require('../../../static/images/fz/grade.png'),
      imgurl72: require('../../../static/images/fz/grade2.png'),
      imgurl8: require('../../../static/images/fz/qianjjj.png'),
      imgurl9: require('../../../static/images/fz/jia.png'),
      imgurl10: require('../../../static/images/fz/jian.png'),
      yetcD: false,
      yetcDTwo: false,
      csBuy: false,
      hycz: false,
      num: 1,
      task_moneys: 0,
      vipData: [],
      task_money: null,
      task_money1: null
    }
  },
  methods: {
    topUp(index) {
      // console.log(this.vipData[index].grade, index);
      // return;
      this.task_moneys = this.vipData[index].money
      this.hycz = !this.hycz
      this.yetcDTwo = !this.yetcDTwo
    },
    paymentVip() {
      let grade
      this.vipData.forEach((list, index) => {
        if (list.money == this.task_moneys) {
          grade = list.grade
        }
      })
      if (grade) {
        this.$axios({
          method: 'POST',
          url: 'NeedLoginAction/continuation',
          data: {
            token: sessionStorage.token,
            level: grade
          }
        })
          .then(res => {
            if (res.data.code == 200) {
              this.$router.go(0)
            } else {
              alert(res.data.msg)
            }
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        console.log(grade)
      }
      // console.log(grade)
      this.yetcDTwo = !this.yetcDTwo
    },
    paymentTime() {
      this.$axios({
        method: 'POST',
        url: 'Needloginaction/getfrequency',
        data: {
          token: sessionStorage.token,
          frequency: this.num
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            this.$router.go(0)
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          console.log(error)
        })
      this.yetcD = !this.yetcD
    },
    tankuang(sta) {
      switch (sta) {
        case 'ye':
          // this.yetcD = !this.yetcD;
          this.$jump('/payWay')
          break
        case 'yegm':
          this.csBuy = !this.csBuy
          break
        case 'lixf':
          this.hycz = !this.hycz
          // this.yetcD = false;
          break
        case 'goumai':
          this.task_money1 = this.num * this.returnData.invite_money
          this.csBuy = !this.csBuy
          this.yetcD = !this.yetcD
          break
        case 'quxiao':
          this.yetcD = !this.yetcD
          break
        case 'zfym':
          this.showPop = !this.showPop
          break
      }
    },
    logOut() {
      this.$axios({
        method: 'POST',
        url: 'NeedLoginAction/log_out',
        data: {
          token: sessionStorage.token
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            sessionStorage.clear()
            this.$jump('/')
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    // sendg(ret) {
    //   this.showPop = ret
    // },
    jia() {
      // this.$nextTick(()=>{

      this.num = this.num + 1
      // console.log(this.num)
      // })
      // this.num = this.num + 1;
      // console.log(this.num)
    },
    jian() {
      this.num === 1 ? (this.num = 1) : (this.num = this.num - 1)
      // console.log(this.num)
    },
    watchweChatPay() {
      if (sessionStorage.weChatPay) {
        sessionStorage.removeItem('weChatPay')
        this.$router.go(0)
        clearInterval(timer)
      }
    }
  },
  mounted() {
    timer = setInterval(() => {
      this.watchweChatPay()
    }, 1000)
  },
  created() {
    /** 获取个人数据 */
    this.$axios({
      method: 'POST',
      url: '/Needloginaction/Personal',
      data: {
        token: sessionStorage.token
      }
    })
      .then(res => {
        if (res.data.code == 200) {
          this.returnData = res['data']['data']
        } else {
          alert(res.data.msg)
        }
      })
      .catch(error => {
        console.log(error)
      })

    /** 获取会员金额 */
    this.$axios({
      method: 'post',
      url: 'Needloginaction/getmoney',
      data: {
        token: sessionStorage.token
      }
    })
      .then(res => {
        if (res.data.code == 200) {
          this.vipData = res['data']['data']
        }
        //  else {
        //   alert(res.data.msg)
        // }
      })
      .catch(error => {
        console.log(error)
      })

    /** 获取次数金额 */
    this.$axios({
      method: 'POST',
      url: 'Flink/money'
    })
      .then(res => {
        if (res.data.code == 200) {
          this.task_money = res.data.data.money
        } else {
          alert(res.data.msg)
        }
      })
      .catch(error => {
        console.log(error)
      })
  },
  destroyed() {
    if (!timer) {
      timer = setInterval(() => {
        this.watchweChatPay()
      }, 1000)
    }
  }
}
</script>

<style scoped lang="scss">
.wal-pop {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100vh;
  & > div {
    margin: 0 auto;
    margin-top: 6.3rem;
    width: 7.826667rem;
    height: 5.88rem;
    background-color: #4e4e4e;
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > div {
      margin-top: 0.55rem;
    }
    & > div:nth-child(1) {
      font-size: 0.44rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #303030;
    }
    & > div:nth-child(2) {
      font-size: 0.44rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #ffd35e;
      & > img {
        width: 0.64rem;
        height: 0.773333rem;
      }
    }
    & > div:nth-child(3) {
      width: 80%;
      text-align: center;
      font-size: 0.413333rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #888888;
    }
    & > div:nth-child(3) {
      font-size: 0.413333rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #888888;
    }
    & > div:nth-child(4) {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      & > div:nth-child(1) {
        width: 2.76rem;
        height: 1rem;
        border-radius: 0.506667rem;
        border: solid 1px #ffd35e;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 0.44rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #303030;
      }
      & > div:nth-child(2) {
        margin-left: 0.533333rem;
        width: 2.76rem;
        height: 1rem;
        background-color: #ffd35e;
        border-radius: 0.506667rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 0.44rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #fff;
      }
    }
  }
}

.allper {
  background-image: url('../../../static/images/bgimg.png');
  background-size: 100% 100%;
  width: 100%;
  min-height: 100vh;
  background-color: #eaeaea;
  .header {
    width: 100%;
    height: 5.293rem;
    // background-color: #ffd35e;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    & > .top {
      margin-top: 0.92rem;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      & > img {
        margin-left: 0.3rem;
        width: 0.333rem;
        height: 0.56rem;
      }
      & > div {
        font-family: KozGoPr6N-Regular;
        font-size: 0.42rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #ffffff;
      }
      & > div:nth-child(3) {
        margin-right: 0.3rem;
      }
    }
    & > .center {
      margin-top: 0.52rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      & > img {
        margin-left: 0.707rem;
        width: 1.507rem;
        height: 1.507rem;
        border-radius: 50%;
      }
      & > div {
        margin-left: 0.307rem;
        font-family: PingFang-SC-Bold;
        font-size: 0.519rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.444rem;
        letter-spacing: 0rem;
        color: #ffffff;
      }
    }
    & > .bottom {
      margin: 0 auto;
      margin-top: 0.453rem;
      width: 9.4rem;
      height: 1.507rem;
      background-color: #4e4e4e;
      box-shadow: 0.049rem -0.02rem 0.613rem 0rem rgba(104, 104, 104, 0.19);
      border-radius: 0.4rem 0.4rem 0rem 0rem;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      & > div:nth-child(1) {
        font-family: PingFang-SC-Bold;
        font-size: 0.444rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.444rem;
        letter-spacing: 0rem;
        color: #b0b1b6;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        & > img {
          margin-left: 0.25rem;
          width: 0.573rem;
          height: 0.547rem;
        }
      }
      & > div:nth-child(2) {
        width: 1.853rem;
        height: 0.64rem;
        border-radius: 0.133rem;
        border: solid 0.022rem #6a6a6c;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        color: #b0b1b6;
      }
    }
  }
  .container {
    color: #b0b1b6 !important;
    margin: 0.427rem auto;
    width: 9.147rem;
    height: 10.093rem;
    background-color: #4e4e4e;
    border-radius: 0.32rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    & > .myqy {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      color: #b0b1b6 !important;
      & > div:nth-child(1) {
        margin-left: 0.28rem;
        width: 100%;
        height: 0.853rem;
        border-bottom: #6a6a6c 0.013333rem solid;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        color: #b0b1b6;
      }
      & > div:nth-child(2) {
        color: #b0b1b6;
        width: 100%;
        height: 3.747rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        border-bottom: #6a6a6c 0.013333rem solid;
        & > div {
          width: 4.547rem;
          height: 3.733rem;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          & > div {
            font-family: PingFang-SC-Regular;
            font-size: 0.37rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0.444rem;
            letter-spacing: 0rem;
            color: #b0b1b6;
          }
          & > div:nth-child(4) {
            font-family: PingFang-SC-Regular;
            font-size: 0.37rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0.444rem;
            letter-spacing: 0rem;
            color: #b0b1b6;
          }
        }
        & > div:nth-child(1) {
          border-right: #6a6a6c 0.013333rem solid;
          & > img {
            width: 1.427rem;
            height: 1.08rem;
          }
        }
        & > div:nth-child(2) {
          & > img {
            width: 0.88rem;
            height: 1.04rem;
          }
        }
      }
    }
    & > .myorder {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      & > div:nth-child(1) {
        margin-left: 0.28rem;
        width: 100%;
        height: 0.853rem;
        // border-bottom: #e7e7e7 0.013333rem solid;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
      }
      & > div:nth-child(2) {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        border-bottom: #6a6a6c 0.013333rem solid;
        & > div {
          width: 4.547rem;
          height: 3.733rem;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
        }
        & > div:nth-child(1) {
          & > img {
            width: 0.947rem;
            height: 0.947rem;
          }
        }
        & > div:nth-child(2) {
          & > img {
            width: 0.773rem;
            height: 0.933rem;
          }
        }
      }
    }
  }
}
.yetc {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #b0b1b6 !important;
  & > .cont {
    width: 7.827rem;
    height: 5.88rem;
    background-color: #fff;
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    & > div:nth-child(1) {
      font-family: PingFang-SC-Regular;
      font-size: 0.444rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #b0b1b6;
    }
    & > div:nth-child(2) {
      font-family: PingFang-SC-Regular;
      font-size: 0.444rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #b0b1b6;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      & > img {
        margin-right: 0.24rem;
        width: 0.64rem;
        height: 0.773rem;
      }
    }
    & > div:nth-child(3) {
      width: 5.12rem;
      font-family: PingFang-SC-Regular;
      font-size: 0.407rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #b0b1b6;
      text-align: center;
    }
    & > div:nth-child(4) {
      width: 6.627rem;
      height: 1rem;
      background-color: #4e4e4e;
      border-radius: 0.5rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-family: PingFang-SC-Regular;
      font-size: 0.444rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #fff;
    }
  }
}
.csbuy {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  & > .cont {
    width: 9.4rem;
    height: 5.88rem;
    background-color: #ffffff;
    box-shadow: 0.049rem -0.02rem 0.613rem 0rem rgba(104, 104, 104, 0.19);
    border-radius: 0.4rem 0.4rem 0rem 0rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    & > div:nth-child(1) {
      width: 100%;
      font-family: PingFang-SC-Regular;
      font-size: 0.519rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.444rem;
      letter-spacing: 0rem;
      color: #303030;
      text-align: center;
    }
    & > div:nth-child(2) {
      width: 100%;
      font-family: PingFang-SC-Regular;
      font-size: 0.519rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.444rem;
      letter-spacing: 0rem;
      color: #303030;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      & > div:nth-child(1) {
        margin-left: 0.413rem;
        font-family: PingFang-SC-Bold;
        font-size: 0.444rem;
        font-weight: 600;
        font-stretch: normal;
        line-height: 0.444rem;
        letter-spacing: 0rem;
        color: #000;
        & > img {
          width: 0.373rem;
          height: 0.453rem;
        }
      }
      & > div:nth-child(2) {
        margin-right: 0.413rem;
        font-family: PingFang-SC-Regular;
        font-size: 0.444rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.526rem;
        letter-spacing: 0rem;
        color: #303030;
      }
    }
    & > div:nth-child(3) {
      width: 100%;
      font-family: PingFang-SC-Regular;
      font-size: 0.519rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.444rem;
      letter-spacing: 0rem;
      color: #303030;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      & > div:nth-child(1) {
        margin-left: 0.413rem;
        font-family: PingFang-SC-Bold;
        font-size: 0.444rem;
        font-weight: 600;
        font-stretch: normal;
        line-height: 0.444rem;
        letter-spacing: 0rem;
        color: #000;
        & > img {
          width: 0.573rem;
          height: 0.547rem;
        }
      }
      & > div:nth-child(2) {
        margin-right: 0.413rem;
        font-family: PingFang-SC-Regular;
        font-size: 0.444rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.526rem;
        letter-spacing: 0rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: #303030;
        & > img {
          margin: 0 0.2rem;
          width: 0.493rem;
          height: 0.493rem;
        }
      }
    }
    & > .yegff {
      width: 8.453rem;
      height: 0.8rem;
      background-color: #323232;
      border-radius: 0.4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: PingFang-SC-Medium;
      font-size: 0.444rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.444rem;
      letter-spacing: 0rem;
      color: #ffffff;
    }
    & > .cishu {
      width: 100%;
      font-family: PingFang-SC-Regular;
      font-size: 0.519rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.444rem;
      letter-spacing: 0rem;
      color: #303030;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      & > div:nth-child(1) {
        margin-left: 0.413rem;
        font-family: PingFang-SC-Bold;
        font-size: 0.444rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.444rem;
        letter-spacing: 0rem;
        color: #ffd35e;
        & > img {
          width: 0.573rem !important;
          height: 0.547rem !important;
        }
      }
      & > div:nth-child(2) {
        margin-right: 0.413rem;
        font-family: PingFang-SC-Regular;
        font-size: 0.444rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.526rem;
        letter-spacing: 0rem;
        color: #303030;
      }
    }
  }
}
</style>
